<template>
    <view class="setting-container">
        <nav-bar title="设置"></nav-bar>
        <view class="setting-list">
            <view class="setting-item">
                <view class="setting-left">
                    <image :src="imgSrc" mode="" />
                </view>
                <view class="setting-right" @click="changeAvatar">
                    修改
                    <image src="../../static/user/right.svg" mode="" />
                </view>
            </view>
            <view class="setting-item" @click="toPage('changeTel')">
                <view class="setting-left"> 登录号码 </view>
                <view class="setting-right">
                    修改
                    <image src="../../static/user/right.svg" mode="" />
                </view>
            </view>
            <view class="setting-item" @click="toPage('changePassword')">
                <view class="setting-left"> 登录密码 </view>
                <view class="setting-right">
                    修改
                    <image src="../../static/user/right.svg" mode="" />
                </view>
            </view>
            <view class="setting-item" @click="toPage('changeNickname')">
                <view class="setting-left"> 昵称 </view>
                <view class="setting-right">
                    修改
                    <image src="../../static/user/right.svg" mode="" />
                </view>
            </view>
            <view class="setting-item" @click="toPage('suggest')">
                <view class="setting-left"> 意见建议 </view>
                <view class="setting-right">
                    <image src="../../static/user/right.svg" mode="" />
                </view>
            </view>
            <view class="setting-item">
                <view class="setting-left"> 版本号 </view>
                <view class="setting-right">
                    1.0
                    <image src="../../static/user/right.svg" mode="" />
                </view>
            </view>
            <view class="setting-item" @click="toPage('customerService')">
                <view class="setting-left"> 客服中心 </view>
                <view class="setting-right">
                    <image src="../../static/user/right.svg" mode="" />
                </view>
            </view>
            <view class="setting-item" @click="toPage('business')">
                <view class="setting-left"> 商务合作 </view>
                <view class="setting-right">
                    <image src="../../static/user/right.svg" mode="" />
                </view>
            </view>
            <view class="setting-item" @click="showCacheModal">
                <view class="setting-left"> 清除缓存 </view>
                <view class="setting-right">
                    {{ cacheSize }}
                    <image src="../../static/user/right.svg" mode="" />
                </view>
            </view>
        </view>
        <!-- <view class="out-login-btn" @click="outLogin"> 退出登录 </view> -->
        <u-modal
            v-model="cacheModalShow"
            :mask-close-able="true"
            title="系统提示"
            content="确定清除缓存"
            :show-cancel-button="true"
            @confirm="clearCache"
        ></u-modal>
		<!-- 退出按钮 -->
		<view class="footer">
			<view class="out-login-btn"  @click="outLogin">退出登录</view>
		</view>
    </view>
</template>

<script>
import NavBar from "components/NavBar";
export default {
    components: {
        NavBar,
    },
    data() {
        return {
            cacheSize: "",
            cacheModalShow: false,
            imgSrc: "../../static/user/user.png",
        };
    },
    onReady() {
        this.getCacheSize();
    },
	onShow:function(){
		this.getUserInfo()
	},
    methods: {
        getCacheSize() {
            const size = uni.getStorageInfoSync().currentSize;
            if (size < 1024) {
                this.cacheSize = size + "B";
            } else if (size / 1024 >= 1 && size / 1024 / 1024 < 1) {
                this.cacheSize = Math.floor((size / 1024) * 100) / 100 + "KB";
            } else if (size / 1024 / 1024 >= 1) {
                this.cacheSize =
                    Math.floor((size / 1024 / 1024) * 100) / 100 + "M";
            }
        },
        showCacheModal() {
            this.cacheModalShow = true;
        },
        clearCache() {
            uni.clearStorage();
            this.getCacheSize();
        },
        toPage(page) {
            uni.navigateTo({
                url: "/pages/setting/" + page,
            });
        },
        outLogin() {
            uni.navigateTo({
                url: "/pages/login",
            });
        },
        changeAvatar() {
            uni.chooseImage({
                success: (chooseImageRes) => {
                    const tempFilePaths = chooseImageRes.tempFilePaths;
                    uni.uploadFile({
                        url: "http://cartoon-books-admin.v2.ascetic.top/api/upload_file_oss",
                        filePath: tempFilePaths[0],
                        name: "file",
                        header: {
                            Authorized: uni.getStorageSync("token"),
                        },
                        formData: {
                            user: "test",
                        },
                        success: (uploadFileRes) => {
                            console.log(uploadFileRes.data);
                            let url = JSON.parse(uploadFileRes.data).data.url;
                            this.imgSrc = url;
                            this.changeAvatarReq(url);
                            console.log(this.imgSrc);
                        },
                    });
                },
            });
        },
		getUserInfo() {
			this.$u.post("my_show").then((res) => {
				console.log(res)
				this.userInfo = res.data.user_info;
				if(res.data.user_info.avatar==''||res.data.user_info.avatar==null||res.data.user_info.avatar==undefined){
					this.imgSrc = "../../static/user/user.png"
				}else{
					this.imgSrc = res.data.user_info.avatar
				}
				
				// this.dataList = res.data.folder_info.data;
				// this.bookCount = res.data.folder_info.count;
			});
		},
        changeAvatarReq(url) {
            this.$u
                .post("edit_user_avatar", {
                    avatar: url,
                })
                .then((res) => {
                    this.$u.toast("修改成功");
                });
        },
    },
};
</script>

<style scoped>
	
	.footer{
		width: 100%;
		height: 70px;
		display: table;
		background-color: #fff;
		position: fixed;
		left: 0px;
		bottom: 0px;
		border-top: 0.5px solid #ededed;
		box-sizing: border-box;
		padding: 11.5px 4%;
	}
page {
    background-color: rgb(253, 253, 240);
}
.setting-container {
    width: 100%;
    /* display: flex;
    flex-direction: column;
    justify-content: center; */
	height: auto;
	display: inline-block;
	padding-bottom: 80px;
}
.setting-list {
    width: 100%;
    box-sizing: border-box;
    padding: 40rpx;
}
.setting-item {
    width: 100%;
    display: flex;
    justify-content: space-between;
    border-bottom: 1rpx solid #ededed;
    align-items: center;
    padding: 30rpx 0;
}
.setting-left image {
    height: 120rpx;
    width: 120rpx;
    border-radius: 50%;
}
.setting-right {
    display: flex;
    align-items: center;
    font-size: 14px;
}
.setting-right image {
    height: 32rpx;
    width: 32rpx;
    margin-left: 10rpx;
}
.out-login-btn {
    width: 100%;
    background-color: rgb(51, 204, 0);
    line-height: 45px;
	text-align: center;
	border-radius: 50px;
    font-size: 16px;
    color: #fff;
}
</style>
